<template>
    <view class="list-wrap">
        <view class="item" v-for="(item, index) in doctorList" :key="index">
            <!-- 头部区域开始 -->
            <view class="head-box">
                <image
                    :src="item.avatar_url ? global.FILE_DOMAIN + item.avatar_url : '/static/images/avatar.png'"
                />
                <view class="info-panel">
                    <text class="name">{{item.name}}</text>
                    <text class="intro ellipsis-2"> {{ item.specialty }} {{ item.title }} {{ item.proficient_desc }}</text>
                </view>

                <button style="color: #27BA9B;border-color: #27BA9B;border-radius: 20px;" type="primary" plain="true" size="mini">+关注</button>
            </view>
            <!-- 头部区域结束 -->

            <!-- 标题区域开始 -->
            <view class="title-box">四大分卫确认全网公敌试试低填浅挖热法青蛙VS的</view>
            <!-- 标题区域结束 -->
            <!-- 内容区域开始 -->
            <view class="content-box">
                阿斯蒂芬二也是个森岛帆高打撒发撒发深V萨维尔额有图有交通费归纳申达股份打算GV不是都发薇娅地方个人个人他告诉大V他以为他粉丝大V
            </view>
            <!-- 内容区域结束 -->

            <!-- 图片区域开始 -->
            <view class="image-box">
                <view class="image-item" v-for="(item, index) in 3" :key="index">
                    <image
                        src="/static/images/dangan.png"
                        mode="scaleToFill"
                    />
                </view>
            </view>
            <!-- 图片区域结束 -->
        </view>
    </view>
</template>

<script setup lang="ts">
import type { Doctor } from '@/types/doctor';
import { inject } from 'vue';

// ----------------- 定义全局变量开始 -----------------
// 当使用基于类型的声明时，我们失去了为 props 声明默认值的能力。这可以通过 withDefaults 编译器宏解决：
// withDefaults(defineProps<{
//     list: Doctor[]
// }>(),{
//     list: () => <Doctor>[]
// })
const global: any = inject('global')
defineProps<{ doctorList: Doctor[] }>()
// ----------------- 定义全局变量结束 -----------------
</script>

<style scoped lang="scss">
.list-wrap {
    background-color: #fff;
    .item {
        margin: 0 30rpx;
        padding: 30rpx 0;
        border-bottom: 2rpx solid gainsboro;
        
        &:last-child {
            border-bottom: none;
        }
        

        .head-box {
            display: flex;
            align-items: center;
            image {
                border-radius: 50%;
                width: 80rpx;
                height: 80rpx;
            }
            .info-panel {
                display: flex;
                flex-direction: column;
                flex: 1;
                padding: 0 20rpx;
                .name {
                    font-size: 28rpx;
                }
                .intro {
                    font-size: 24rpx;
                    color: #D1D1D1;
                }
            }
        }

        // 标题区域开始
        .title-box {
            padding-top: 20rpx;
            font-size: 28rpx;
            font-weight: 600;
        }
        // 标题区域结束

        // 内容区域开始
        .content-box {
            padding-top: 20rpx;
            font-size: 26rpx;
            color: #9A9A9A;
        }
        // 内容区域结束

        // 图片区域开始
        .image-box {
            display: flex;
            justify-content: space-between;

            padding: 20rpx 0;

            .image-item {
                border: 2rpx solid gainsboro;
                width: 240rpx;
                height: 240rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 10rpx;
                image {
                    width: 200rpx;
                    height: 200rpx;
                }
            }
        }
        // 图片区域结束
    }
}
</style>